<template>
    <Logo></Logo>

    <div class="leftBox">
        <el-input
            v-model="filterText"
            style="margin-bottom: 9px;"
            placeholder="请输入"
        />
        <el-row :gutter="10" style="margin-bottom: 10px;">
            <el-col :span="12">
                <el-dropdown style="width: 100%; margin-top: 1px;">
                    <el-button type="primary" size="small" style="width: 100%;">
                        新建<el-icon class="el-icon--right"><arrow-down /></el-icon>
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                        <el-dropdown-item>文件夹</el-dropdown-item>
                        <el-dropdown-item>导入</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-col>
            <el-col :span="12">
                <el-button @click="exportData" type="primary" icon="Download" size="small" style="width: 100%;">导出</el-button>
            </el-col>
        </el-row>
        <el-tree
            ref="treeRef"
            class="treeCss"
            :data="data"
            show-checkbox
            node-key="id"
            default-expand-all
            :props="defaultProps"
            :filter-node-method="filterNode"
            @node-click="nodeClick"
        />
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import Logo from "@/views/leftNav/components/logo.vue";
import { ElMessage } from 'element-plus'

const filterText = ref('')
const treeRef = ref(null)
const defaultProps = {
    children: 'children',
    label: 'label',
}
watch(filterText, (val) => {
  treeRef.value.filter(val)
})
const filterNode = (value, data) => {
  if (!value) return true
  return data.label.includes(value)
}
const data = [
    {
        id: 1,
        label: 'Level one 1',
        children: [
            {
                id: 4,
                label: 'Level two 1-1',
                children: [
                    {
                        id: 9,
                        label: 'Level three 1-1-1',
                    },
                    {
                        id: 10,
                        label: 'Level three 1-1-2',
                    },
                ],
            },
        ],
    },
    {
        id: 2,
        label: 'Level one 2',
        children: [
            {
                id: 5,
                label: 'Level two 2-1',
            },
            {
                id: 6,
                label: 'Level two 2-2',
            },
        ],
    },
    {
        id: 3,
        label: 'Level one 3',
        children: [
            {
                id: 7,
                label: 'Level two 3-1',
            },
            {
                id: 8,
                label: 'Level two 3-2',
            },
        ],
    },
]


function exportData(){
    const arr = treeRef.value.getCheckedKeys()
    console.log('勾选数据', arr)
    if(arr.length>0){

    }else{
        ElMessage({
            message: '请勾选需要导出的数据！',
            type: 'warning',
        })
    }
}

// 点击节点
function nodeClick(data){
    console.log('点击节点', data)
}


</script>


<style scoped>
.leftBox{
    padding: 10px;
}
.treeCss{
    height: calc(100vh - 158px);
    overflow: auto;
}
</style>